{% extends 'user/base.html' %}

{% block title %}
    商品详情
{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='css/product.css') }}" rel="stylesheet" type="text/css"/>
    <script src="{{ url_for('static',filename='js/detail.js') }}"></script>
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
    <script src="{{ url_for('static',filename='js/paginathing.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/login_mt.js') }}"></script>
    <script src="{{ url_for('static',filename='js/flyto.js') }}"></script>
    <script src="http://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

{% endblock %}

{% block main %}
    <div class="container productContent">
        <div class="span6">
            <div class="hotProductCategory">
                {% for category in categorys %}
                    <dl>
                        <dt>
                            <a href="{{ url_for('product.getClassify',cid=category.id) }}">{{ category.cname }}</a>
                        </dt>
                        {% for categorysecond in category.categoryseconds %}
                            <dd>
                                {% if csid == categorysecond.id %}
                                    <a href="{{ url_for('product.getClassify',csid=categorysecond.id) }}"
                                       class="categorysecond">{{ categorysecond.csname }}</a>
                                {% else %}
                                    <a href="{{ url_for('product.getClassify',csid=categorysecond.id) }}">{{ categorysecond.csname }}</a>
                                {% endif %}
                            </dd>
                        {% endfor %}
                    </dl>
                {% endfor %}
            </div>

        </div>
        <div class="span18 last other_area_last">

            <div class="productImage">

                <a title="" style="outline-style: none; text-decoration: none;" id="zoom" href="{{ images[0] }}"
                   target="_blank"
                   rel="gallery">
                    <div class="zoomPad">
                        <img style="opacity: 1;" title="" class="medium" src="{{ images[0] }}">
                    </div>
                </a>

            </div>
            <span style="display: none" class="no_use_pid">{{ product.id }}</span>
            <span style="display: none" class="no_use_uid">{{ uid }}</span>
            <div class="name">{{ product.pname }}</div>

            <div class="sn">
                <div><strong>浏览量：</strong>{{ product.click_count }} 次</div>
                <div class="flex_row love_dot">
                    <strong>喜欢：</strong>
                    <span class="love_nums" style="color: red">{{ users|length }}</span> 人
                    {% if  is_love == 1 %}
                        <span class="glyphicon glyphicon-heart myLove do_myLove" title="不喜欢"></span>
                    {% else %}
                        <span style="margin-left: 5px" class="glyphicon glyphicon-heart myLove" title="喜欢"></span>
                    {% endif %}
                </div>
                <div class="post_user">
                    <strong>卖家：</strong><img id="{{ postUser.id }}" class="user_img_btn" title="点我看Ta在售商品" src="{{ postUser.img_url }}">
                </div>
            </div>
            <div class="info">
                <dl>
                    <dt>新品价:</dt>
                    <dd>
                        <strong>
                            <del>￥{{ product.old_price }}元</del>
                        </strong>
                    </dd>
                </dl>
                <dl>
                    <dt>南工价:</dt>
                    <dd>
                        <strong>￥{{ product.new_price }}元</strong>
                    </dd>
                </dl>
                {% if product.counts == 0 %}
                    <dl>
                        <dt>商品状态:</dt>
                        <dd>
                            <a target="_blank" title="已售完">已售完</a>
                        </dd>
                    </dl>
                {% else %}
                    <dl>
                        <dt>促销:</dt>
                        <dd>
                            <a target="_blank">限时抢购</a>
                        </dd>
                    </dl>
                {% endif %}
            </div>
            <form action="cart_addCart" method="post" id="cartForm">
                <input type="hidden" name="pid" value="${pPro.pid}"/>
                <div class="action">

                    <dl class="quantity">
                        <dt>购买数量:</dt>
                        <dd>
                            <input id="count" oninput="checkCount()" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                   onafterpaste="this.value=this.value.replace(/\D/g,'')" name="count" value="1"
                                   maxlength="4" onpaste="return false;" type="text">
                            <div>
                                <span style="margin-left: 10px">目前此商品数量为<span
                                        style="color: #E14961;font-weight: bolder">{{ product.counts }}</span></span>
                            </div>
                        </dd>
                    </dl>
                    {% if product.counts == 0 %}
                        <div class="buy">
                            <input class="addCart" style="background: lightgrey;text-align: center" value="已售完"
                                   type="button">
                        </div>
                    {% elif product.is_pass != 2 %}
                        <div class="buy">
                            <input class="addCart" value="未上架"
                                   style="background: #cccccc;text-align: center;color: #f52222;" type="button">
                        </div>
                    {% else %}
                        <div class="buy">
                            <input id="addCart" class="addCart" value="加入购物车" type="button">
                        </div>
                    {% endif %}
                </div>
            </form>
            <div id="bar" class="bar">
                <ul>
                    <li id="loveTab">
                        <a href="#love">喜欢的人</a>
                    </li>
                    <li id="commnetTab">
                        <a href="#ask">商品询问</a>
                    </li>
                    <li id="introductionTab">
                        <a href="#introduction">商品描述</a>
                    </li>
                </ul>
            </div>
            <div id="love" class="show_love_user_area">
                <h3 style="text-align: center">喜欢此商品的会员</h3>
                <ul class="show_love_user">
                    {% for user in users %}
                        <div class="{{ user.id }}"><img src="{{ user.img_url }}" title="{{ user.username }}"></div>
                    {% endfor %}
                    {% if users|length == 0 %}
                        <li class="no_like">暂无会员</li>
                    {% endif %}
                </ul>
            </div>
            <div id="ask" name="love" class="love detail_all">
                <div class="write_comment_area">
                    <h3 style="text-align: center">商品议价提问</h3>
                    <textarea class="form-control real_comment" rows="3"
                              placeholder="商议价格还有关于商品的提问在这里发表，语言有不合法或者不符合南工二手交易平台规定，会被删除并且你的账号可能会被查封~"></textarea>
                    <button type="button" class="btn btn-primary comment_send" data-toggle="button" aria-pressed="false"
                            autocomplete="off">询问
                    </button>
                </div>
                <span class="no_use_count" style="display: none">{{ product.counts }}</span>
                <div class="show_comment_area">
                    <div class="all_comment">
                        <ul class="list-group all_comment_in_out ">
                            {% for comment in comments %}
                                <li class="list-group-item out_item">
                                    <div class="show_comment_content show_outer">
                                        <img src="{{ comment.user.img_url }}">
                                        <p>
                                            {{ comment.content }}
                                        </p>
                                        <strong>
                                            <span>{{ comment.cdate }} {{ comment.user.username }}</span>
                                            {% if uid == comment.user.id or uid == product.uid %}
                                                <span class="reply to_del"><a href="#"
                                                                              my_id="{{ comment.id }}">删除</a></span>
                                            {% endif %}
                                            <span><a href="#" class="reply to_relply" my_id="{{ comment.id }}">回复TA</a></span>
                                            <span><a href="#" class="reply watch_all_reply" my_id="{{ comment.id }}">查看全部回复(<b>{{ comment.comments |length }}</b>)</a></span>
                                        </strong>
                                        <div class="show_all_reply">

                                            <ul class=" all_comment_in small_comment">
                                                {% if comment.comments |length != 0 %}
                                                    {% for comment1 in comment.comments %}
                                                        <li class="list-group-item list-group-inner">
                                                            <div class="show_comment_content">
                                                                <img src="{{ comment1.user.img_url }}">
                                                                <p>
                                                                    {{ comment1.content }}
                                                                </p>
                                                                <strong>
                                                                    <span>{{ comment1.cdate }} {{ comment1.user.username }}</span>
                                                                    {% if uid == comment.uid or uid == product.uid %}
                                                                        <span class="reply to_del1"><a href="#"
                                                                                                       my_id="{{ comment1.id }}">删除</a></span>
                                                                    {% endif %}
                                                                    <span><a href="#" class="reply to_relply"
                                                                             my_id="{{ comment.id }}">回复TA</a></span>
                                                                </strong>
                                                            </div>
                                                        </li>
                                                    {% endfor %}

                                                {% endif %}
                                            </ul>

                                            <textarea class="form-control real_comment1" rows="3"
                                                      placeholder="回复的语言有不合法或者不符合南工二手交易平台规定，会被删除并且你的账号可能会被查封~"></textarea>
                                            <button type="button" cid="{{ comment.id }}"
                                                    class="btn btn-default comment_send_small" data-toggle="button"
                                                    aria-pressed="false" autocomplete="off">回复
                                            </button>

                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                </div>
            </div>
            <div id="introduction" name="introduction" class="introduction detail_all">
                <h3 style="text-align: center">商品描述</h3>
                <div class="title">
                    <strong> {{ product.pDesc }}</strong>
                </div>
                <div>
                    {% for image in images %}
                        <img src="{{ image }}">
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" id="rocket-to-top">
        <div style="opacity:0;display: block;" class="level-2"></div>
        <div class="level-3"></div>
    </div>

    <div id="wrapper" class="post_list">
        <div class="close_btn">关闭</div>
        <h3 style="text-align: center">在售商品共有<span class="post_num">0</span>件</h3>
        <div class="product_list flex_row">
        </div>

    </div>


    {% include 'user/login_mt.html' %}
{% endblock %}